<template>
  <el-form label-position="top" :rules="rules" ref="form" :model="form" class="padding-b">
    <el-form-item :label="label" prop="value">
      <el-time-picker
        size="mini"
        v-model.trim="form.value"
        :editable="boolean"
        :id="'busTime' + num"
        :placeholder="placeholder || $t('business.chooseTime')"
        :disabled="disabled"
        @blur="blur"
        value-format="HH:mm:ss"
      >
      </el-time-picker>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'Btime',
  props: {
    label: String,
    default: { type: String, default: '' },
    id: String,
    disabled: { type: String | Boolean, default: false },
    placeholder: { type: String, default: '' },
    require: String,
    random: { type: Number, default: 0 }
  },
  data() {
    // let validate1 = (rule, value, callback) => {
    //   if (!value) {
    //     callback(new Error(this.$t('validate.required')))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      form: {
        value: ''
      },
      num: Math.random(),
      boolean: false,
      rules: {
        value: [{ required: this.require === 'required', message: this.$t('validate.required'), trigger: 'change' }]
      }
    }
  },
  watch: {
    random: {
      deep: true,
      handler: function () {
        let value = this.form.value || ''
        let self = this
        if (this.require === 'required') {
          this.$refs.form.validate((valid) => {
            if (valid) {
            } else {
              value = false
            }
          })
        }
        self.$emit('tellme', { [self.id]: value })
      }
    },
    require() {
      this.rulesValue()
    }
  },
  methods: {
    rulesValue() {
      if (this.require === 'required') {
        this.rules.value[0].required = true
      } else {
        this.rules.value[0].required = false
      }
    },
    submit(noCheck) {
      // noCheck为true 不进行校验
      let obj = {}
      if (noCheck) {
        obj.success = true
      } else {
        this.$refs.form.validate((valid) => {
          obj.success = valid
        })
      }
      if (obj.success) {
        let value = this.form.value
        obj.data = { [this.id]: value || '' }
      }
      return obj
    },
    blur() {
      this.$emit('blurEvent', this.submit(true))
    }
  },
  mounted() {
    this.form.value = this.default || ''
  }
}
</script>
<style lang="stylus" scoped>
@import "../../../../../assets/common.styl";
.padding-b
  padding-bottom $padding5
</style>
